<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Union Arena 组卡器</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link href="./img/favicon_16.ico" rel="icon" sizes="16x16">
    <link href="./img/favicon.ico" rel="icon" sizes="any">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <style>
        .xxfs-btn {
            background: #bdb1b13b;
            color: white;
            font-size: 2rem;
            border: none;
        }

        .xxfs-btn:hover {
            background: #bdb1b176;
        }
    </style>

</head>

<body style="background-image:linear-gradient( #391922, #0c1b29  ) ;height: 100vh;">
    <div class="container text-center" style="height: 30%;">
        <div style="height: 30%;">
        </div>
        <div class="row align-items-center" style="height: 70%;">
            <div class="col">
                <img src="./img/logo_unionarena.png" />
            </div>
        </div>
    </div>
    <div class="container text-center" style="height: 70%;">
        <div class="row align-items-center" style="height: 100%;" id="items">
        </div>
    </div>
</body>
<script>
    request = new XMLHttpRequest();
    request.open("get", "./data/ua_dict.json"); /*设置请求方法与路径*/
    request.send(null); /*不发送数据到服务器*/
    request.onload = function () {
        /*XHR对象获取到返回信息后执行*/
        if (this.status == 200) {
            let items = document.getElementById("items");
            let response = JSON.parse(decodeURIComponent(this.responseText));
            response.ips.forEach((e) => {
                items.innerHTML = items.innerHTML
                    + '<div class="col">  <a class="btn  xxfs-btn" target="_blank" href="./deck_edit2.html?ip=' + e.serialNo + '"> <img src="./img/bnr_' + e.serialNo + '.png" />   </a>  </div>';
            });
        }
    };
</script>

</html>